﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PiaoanWeb.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        <!--
        /*图片新闻滚动*/
        .clear
        {
            clear: both;
        }

        #gallery
        {
            position: relative;
            height: 182px;
        }

            #gallery a
            {
                float: left;
                position: absolute;
                width: 229px;
                left: 4px;
            }

                #gallery a img
                {
                    border: none;
                }

                #gallery a.show
                {
                    z-index: 500;
                }

            #gallery .caption
            {
                z-index: 600;
                background-color: #F6F6F6;
                color: #000;
                height: 26px;
                width: 229px;
                position: absolute;
                bottom: 0;
                left: 4px;
            }

                #gallery .caption .content
                {
                    margin: 5px;
                    text-align: center;
                    font-size: 12px;
                    font-family: 宋体;
                    font-weight: bold;
                }
        -->
    </style>
    <script src="Scripts/pptBox.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
<!--
    $(document).ready(function () {

        //Execute the slideShow
        slideShow();

    });

    function slideShow() {

        //Set the opacity of all images to 0
        $('#gallery a').css({ opacity: 0.0 });

        //Get the first image and display it (set it to full opacity)
        $('#gallery a:first').css({ opacity: 1.0 });

        //Set the caption background to semi-transparent
        $('#gallery .caption').css({ opacity: 0.8 });

        //Resize the width of the caption according to the image width
        $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });

        //Get the caption of the first image from REL attribute and display it
        $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
        .animate({ opacity: 0.8 }, 400);

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery()', 6000);

    }

    function gallery() {

        //if no IMGs have the show class, grab the first image
        var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

        //Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));

        //Get next image caption
        var caption = next.find('img').attr('rel');

        //Set the fade in effect for the next image, show class has higher z-index
        next.css({ opacity: 0.0 })
        .addClass('show')
        .animate({ opacity: 1.0 }, 1000);

        //Hide the current image
        current.animate({ opacity: 0.0 }, 1000)
        .removeClass('show');

        //Set the opacity to 0 and height to 1px
        $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });

        //Animate the caption, opacity to 0.8 and heigth to 100px, a slide up effect
        $('#gallery .caption').animate({ opacity: 0.8 }, 100).animate({ height: '22px' }, 500);

        //Display the content
        $('#gallery .content').html(caption);
    }
    //-->
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 990px">
        <tr>
            <td style="height: 60px">
                <div id="xxx">
                    <script type="text/javascript">
                        var box = new PPTBox();
                        box.width = 990; //宽度
                        box.height = 250;//高度
                        box.autoplayer = 5;//自动播放间隔时间

                        //box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})
                        box.add({ "url": "images/p.jpg", "href": "#", "title": "1" })
                        box.add({ "url": "images/2.jpg", "href": "#", "title": "2" })
                        box.add({ "url": "images/3.jpg", "href": "#", "title": "3" })
                        box.add({ "url": "images/4.jpg", "href": "#", "title": "4" })
                        box.show();
                    </script>
                </div>
            </td>
        </tr>
    </table>
    <table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 990px; height: 350px">
        <tr valign="top">
            <td style="width: 320px">
                <table style="width: 320px" border="0" cellspacing="0" cellpadding="0">
                    <tr style="height: 30px">
                        <td style="background-color: rgb(111,189,102);" align="center"><a href="#" style="width: 330px; font-size: 14px; font-weight: bold">新闻动态</a></td>
                    </tr>
                    <tr style="background-color: white">
                        <td>
                            <asp:GridView ID="NewsGridView" runat="server" AutoGenerateColumns="False" Width="100%" BorderStyle="None" Font-Names="微软雅黑" Font-Size="12px" Font-Underline="False" GridLines="None" ShowHeader="False">
                                <Columns>
                                    <asp:TemplateField HeaderText="标题" ShowHeader="False">
                                        <ItemTemplate>
                                            <asp:HyperLink ID="titleLnk" runat="server" Text='<%# Bind("Title") %>' NavigateUrl='<%# "ViewNews.aspx?NewsID="+Eval("ID") %>' Width="240px"></asp:HyperLink>
                                        </ItemTemplate>
                                        <ItemStyle Height="25px" />
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="PublishDate" DataFormatString="{0:MM/dd}" HeaderText="日期" ShowHeader="False">
                                        <ItemStyle HorizontalAlign="Center" Width="80px" />
                                    </asp:BoundField>
                                </Columns>
                                <RowStyle Font-Size="12px" Height="25px" VerticalAlign="Middle" />
                            </asp:GridView>
                        </td>
                    </tr>
                </table>
            </td>
            <td style="width: 5px"></td>
            <td style="width: 665px">
                <table style="width: 665px" border="0" cellspacing="0" cellpadding="0">
                    <tr style="height: 30px">
                        <td style="background-color: rgb(111,189,102);" align="center"><a href="#" style="width: 655px; font-size: 14px; font-weight: bold">产品展示</a></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Repeater ID="ProductRepeater" runat="server" ItemType="PiaoanWeb.AppLogic.DataAccessLayer.Products">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <table cellpadding="0px" cellspacing="0px" style="width:165px; height:135px; float:left">
                                        <tr align="center">
                                            <td style="background-image: url('Images/ProductBg.jpg'); height: 135px; width: 165px; background-repeat: no-repeat">
                                                <a href='<%# "ViewProduct.aspx?ProductID="+Item.ID %>'><asp:Image ID="ProductImage" ImageUrl='<%#  "ProductPictures/" + Item.ProductImage %>' runat="server" Height="113px" Width="143px" Style="vertical-align: middle; border-width: 0px" /></a>
                                            </td>
                                        </tr>
                                        <tr align="center" valign="middle">
                                            <td><asp:HyperLink ID="productNameLnk" runat="server" Text='<%# Item.Name %>' NavigateUrl='<%# "ViewProduct.aspx?ProductID="+Item.ID %>'></asp:HyperLink></td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</asp:Content>
